<template>
	<view class="personal-info-page">
		<!-- 设置 -->
		<myHeader title="设置" showBack />
		<!-- 资料列表 -->
		<view class="info-list-wrap">
			<view class="info-list">
				<navigator v-for="(item, index) in infoList" :key="index" :url="item.path" class="info-item"
					hover-class="item-hover" hover-stay-time="100">
					<view class="item-left">
						<image class="item-icon" :src="item.icon" mode="aspectFit" />
						<text class="item-label">{{ item.label }}</text>
					</view>
					<text class="item-arrow">></text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from "@/component/header";
	export default {
		components: {
			myHeader,
		},
		data() {
			return {
				infoList: [{
						label: "账号安全",
						icon: "https://www.rebirthealth.com/static/images/personal-info.png",
						path: "/pages/my/settings/accout"
					},
					{
						label: "服务协议",
						icon: "https://www.rebirthealth.com/static/images/my-orders.png",
						path: "/pages/my/settings/protocol"
					},
					{
						label: "隐私安全",
						icon: "https://www.rebirthealth.com/static/images/my-orders.png",
						path: "/pages/my/settings/protocol"
					},
					{
						label: "关于我们",
						icon: "https://www.rebirthealth.com/static/images/settings.png",
						path: "/pages/my/settings/aboutus"
					},
				],
				userInfo: {},
			};
		},
		onLoad() {
			const userInfo = uni.getStorageSync("userInfo");
			this.userInfo = {
				...userInfo
			};
		},
	}
</script>

<style lang="less" scoped>
	.personal-info-page {
		background-color: rgba(19, 30, 50, 1);
		min-height: 100vh;
		color: #fff;

		.info-list-wrap {
			padding: 32rpx;
		}

		.info-list {
			.info-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.item-left {
					display: flex;
					align-items: center;

					.item-icon {
						width: 48rpx;
						height: 48rpx;
						margin-right: 20rpx; // 图标和文字间距
					}

					.item-label {
						font-size: 30rpx;
						color: #333;
					}
				}

				.item-arrow {
					font-size: 32rpx;
					color: #999;
				}
			}
		}
	}
</style>